<template>
  <!-- 顶部 -->
  <div>
    <nav-bar title="搜索结果" />


    <main>
      <van-loading
        type="spinner"
        color="#1989fa"
        v-if="searchListLoading"
        class="loading"
      />
      <van-empty
        image="error"
        description="请求错误"
        v-else-if="!searchList"
      />
      <van-empty
        description="暂无数据"
        v-else-if="!searchList.length"
      />
      <article-list
        :data="searchList"
        v-else
      />
    </main>
  </div>
</template>

<script>
import {
  mapActions,
  mapState,
  mapMutations
} from 'vuex';
export default {
  name: 'Search',
  data() {
    return {
      searchListLoading: false
    };
  },
  methods: {
    ...mapActions('fuzzySearch', ['updateSearchList']),
    ...mapMutations('fuzzySearch', ['SET_SEARCH_LIST']),
    goBack() {
      this.$router.go(-1)
    },
  },
  computed: {
    ...mapState('fuzzySearch', ['searchList']),
  },
  async created() {
    this.searchListLoading = true;
    await this.updateSearchList(this.$route.query.q);
    this.searchListLoading = false;
  },
  beforeDestroy() {
    this.SET_SEARCH_LIST([]);
  },
}
</script>

<style lang="less" scoped>
main {
  height: calc(100vh - 46px);
  overflow: auto;
  padding: 0 8px;
}
</style>
